<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<style>
			.btn-last-page, .btn-next-page {
				padding: 5px 10px;
				font-size: 12px;
				line-height: 1.5;
				border-radius: 3px;
				background: rgba(0,0,0,0.1);
				color: #3245d2;
				border: #3245d2 solid 1px;
			}
           
			.btn-last-page:hover,.btn-next-page:hover{
				color: #3245d2;
			}

			#select-current-page{
			padding: 5px 10px;
				font-size: 12px;
				line-height: 1.5;
				border-radius: 3px;
				background: rgba(0,0,0,0.1);
				color: #3245d2;
				border: #3245d2 solid 1px;
			}
		</style>
	</head>
	<body>
	    <div class="back">
	        <a href="javascript:history.go(-1);">
	            <img src="img/back.png" alt="" />
	        </a>
	    </div>
		<div class="top"><h2>尚尚曝付数据中心</h2></div>
		<!-- <div class="home"><a href="index.html">地图模式</a></div> -->
		<div class="list">
			<table id="tabledata">
				<tr id="title">
					<th>商户名称</th>
					<th>省名称</th>
					<th>城市名称</th>
					<th>区县名称</th>
					<th>街道名称</th>
					<th>详细地址</th>
					<th></th>
				</tr>
			</table>
			<div class="page">
				<a class="btn btn-last-page">上一页</a>
				<label id="current">0</label>/<label id="total">0</label>
				<a class="btn btn-next-page">下一页</a>
				<select id="select-current-page"></select>
			</div>
		</div>
		<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
		<!-- <script src="js/distpicker.data.js"></script>
		<script src="js/distpicker.js"></script> -->
		<script src="js/axios.min.js"></script>
		<script src="js/config.js"></script>
		<script src="jquery-1.11.3.js"></script>
		<script>
			var baseurl = getBaseUrl();
			var searchFrom = {
				'page':1,
				'pageSize':10,
				's_p_code':'',
				's_c_code':'',
				's_r_code':''
			};
			/* 当前页 */
			var current = 1;
			/* 偏移量 */
			var offset = 500;
			/* 总页数 */
			var total = 100;
			/* 当前页元素 */
			var $current = $("#current");
			/* 总页数元素 */
			var $total = $("#total");
			/* 总行数元素 */
			var $line = $("#line");
			/* 选页器元素 */
			var $select = $("#select-current-page");
			const urlParams = new URLSearchParams(window.location.search);
			const paramsObject = Object.fromEntries(urlParams.entries());
			searchFrom.s_p_code = paramsObject.s_p_code;
			searchFrom.s_c_code = paramsObject.s_c_code;
			searchFrom.s_r_code = paramsObject.s_r_code;

			function getUserList(data){
				axios(baseurl+"index.bigData/searchBigDataPage", {
					method: "POST",
					data: data,
				}).then(res => {
					if(res.data.code == 1){
						page(data.page,res.data.data.pages,res.data.data.list);
						var tables = document.getElementById("tabledata");
						$("#tabledata").children().remove();
						var tops = '<tr id="title"><th>商户名称</th><th>省名称</th><th>城市名称</th><th>区县名称</th><th>街道名称</th><th>详细地址</th><th></th></tr>';
						tables.insertAdjacentHTML('beforeend',tops);
						for(var i = 0; i < res.data.data.list.length; i++){
							var texts = "<tr>";
							texts += "<td>"+res.data.data.list[i].title+"</td>";
							texts += "<td>"+res.data.data.list[i].province+"</td>";
							texts += "<td>"+res.data.data.list[i].city+"</td>";
							texts += "<td>"+res.data.data.list[i].region+"</td>";
							texts += "<td>"+res.data.data.list[i].street+"</td>";
							texts += "<td>"+res.data.data.list[i].address+"</td>";
							texts += "<td><a href='detail.html?id="+res.data.data.list[i].m_id+"'>查看详情</a></td>";
							texts += "</tr>";
							tables.insertAdjacentHTML('beforeend',texts);
						}
					}else{
						console.log(res.data.msg);
					}
				})
			}

			getUserList(searchFrom);

			$(function () {
				var last = $(".btn.btn-last-page");
				var next = $(".btn.btn-next-page");
				last.parent().css('color', 'orange');

				last.click(function () {
					if (current > 1 && current <= total) {
						current--;
						$current.text(current);
						$select.find('option[value=' + current + ']').prop('selected', true);
						searchFrom.page = current;
						getUserList(searchFrom);
					}
				});

				next.click(function () {
					if (current < total && current >= 1) {
						current++;
						$current.text(current);
						$select.find('option[value=' + current + ']').prop('selected', true);
						searchFrom.page = current;
						getUserList(searchFrom);
					}
				});

				$select.change(function () {
					current = $(this).val();
					$current.text(current);
					searchFrom.page = current;
					getUserList(searchFrom);
				});
			});
			function page(newpage,pagesize,list) {
				console.log(newpage,pagesize);
				total = pagesize;
				$total.text(total);
				current = newpage;
				$current.text(current);
				var end = current === total ? list.length : current * offset;
				$line.text(list.length);
				options(total);
			}

			function options(size) {
				var html = "";
				for (var i = 1; i <= size; i++) {
					html += "<option value='" + i + "'>";
					html += "第" + i + "页";
					html += "</option>";
				}
				$select.html(html);
				$select.find('option[value=' + $current.text() + ']').prop('selected', true);
			}
		</script>
	</body>
</html>